<template>
  <div>
    <div class="home-box box-3-list">
      <div class="center-box1">
        <div class="box-title-1">
          <img src="@/assets/image/5.webp" alt="">
          <div class="center">
            <p>用户资料管理</p>
            <p>用户资料管理，不要乱写哦～</p>
          </div>
        </div>
        <el-table class="table" :data="tableData" border style="width: 100%">
          <el-table-column prop="username" label="账号"></el-table-column>
          <el-table-column prop="phone" label="手机号"></el-table-column>
          <el-table-column prop="address" show-overflow-tooltip label="性别">
            <template #default="scope">
              {{ scope.row.gender === 'M' ? '男' : '女' }}
            </template>
          </el-table-column>
          <el-table-column prop="address" show-overflow-tooltip label="角色">
            <template #default="scope">
              {{ scope.row.role===1 ? '用户' : '管理员' }}
            </template>
          </el-table-column>
          <el-table-column prop="realName" show-overflow-tooltip label="姓名"></el-table-column>
          <el-table-column prop="idCard" show-overflow-tooltip label="身份证号"></el-table-column>
          <el-table-column prop="habits" show-overflow-tooltip label="兴趣爱好"></el-table-column>
          <el-table-column prop="note" show-overflow-tooltip label="月薪"></el-table-column>
          <el-table-column prop="remake" show-overflow-tooltip label="居住地"></el-table-column>
          <el-table-column prop="address" fixed="right" width="300" align="center" label="操作">
            <template slot-scope="scope">
              <el-button type="danger" @click="deleteUser(scope.row)" icon="el-icon-delete" size="mini">删除</el-button>
              <el-button type="primary" @click="updateUser(scope.row)" icon="el-icon-edit" size="mini">编辑</el-button>
              <el-button type="primary" v-if="scope.row.role === 1" @click="checkedAdmin(scope.row)" icon="el-icon-edit" size="mini">设为管理员</el-button>
              <el-button type="danger" v-if="scope.row.role === 2" @click="cancelAdmin(scope.row)" icon="el-icon-edit" size="mini">取消管理员</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="box-bottom">
          <el-pagination
              large
              background
              @current-change="changePages"
              layout="prev, pager, next"
              :total="total">
          </el-pagination>
        </div>
      </div>
    </div>

    <lz-update-user :user-form="userForm" :is-show="isShow" @closeForm="closeForm"></lz-update-user>

    <lz-footer></lz-footer>


  </div>
</template>

<script>
import LzSubmit from "@/components/lz-submit.vue";
import {getAllUser, getFormList, updateUser} from "@/api/apiFox";
import {parseTime} from "../../utils";

export default {
  components: {LzSubmit},
  data() {
    return {
      isShow: false,
      dialogVisible: false,
      total: 10,
      userForm:{},
      queryParams: {
        role: null,
        pageNum: 1,
        pageSize: 10
      },
      tableData: []
    }
  },

  methods: {
    parseTime,
    changePages(e) {
      console.log(e)
      this.queryParams.pageNum = e
      this.getArray(this.queryParams)
    },
    handleClose() {
      this.dialogVisible = false
    },
    getArray(params) {
      getAllUser(params).then(res => {
        this.tableData = res.list
        this.total = res.totalCount
        this.queryParams.pageNum = res.pageNum
        this.queryParams.pageSize = res.pageSize
      }).catch(err => {
      })
    },
    checkedAdmin(item) {
      this.$confirm('是否将该用户设置成管理员？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateUser({id: item.id, role: 1}).then(res => {
          this.$message.success('管理员设置成功')
          this.getArray(this.queryParams)
        }).catch(err => {
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    cancelAdmin(item){
      this.$confirm('是否取消管理员？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateUser({id: item.id, role: 2}).then(res => {
          this.$message.success('取消管理员成功')
          this.getArray(this.queryParams)
        }).catch(err => {
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    deleteUser(item){
      this.$confirm('是否删除该用户？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateUser({id: item.id, isDelete: 1}).then(res => {
          this.$message.success('已删除')
          this.getArray(this.queryParams)
        }).catch(err => {
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    updateUser(item){
      this.isShow = true
      this.userForm = item
    },
    closeForm(data){
      this.isShow = false
      this.getArray(this.queryParams)
    }
  },
  mounted() {
    this.getArray(this.queryParams)
  }
}
</script>

<style scoped lang="scss">
.home-box {
  width: 100%;
  min-height: calc(100vh - 140px);
  background: var(--homeBgk);
  display: flex;
  justify-content: center;

  .home-center {
    width: 1600px;
    min-height: calc(100vh - 140px);
    display: flex;
    justify-content: space-between;
    //background: #fff;
    .left {
      width: 600px;
      padding-top: 20vh;
      box-sizing: border-box;

      .logo {
        margin: 10px 0;
      }

      .title {
        font-size: 36px;
        font-weight: 400;
        //text-align: center;
        color: var(--textColor);
      }

      .content {
        font-size: 14px;
        margin-top: 15px;
        color: var(--colorTip);
      }

      .btn {
        width: 100%;
        margin-top: 30px;

        a {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 150px;
          font-size: 14px;
          height: 45px;
          color: #fff;
          background: #333;
          border-radius: 10px;
        }
      }
    }

    .right {
      width: 800px;
      margin-right: -200px;
    }
  }
}

.box-nav-list {
  background: var(--navBgk);
  height: 200px !important;
  margin-bottom: -200px;

  .home0-center {
    width: 1600px;
    padding-top: 120px;
    display: flex;
    height: 200px;
    justify-content: space-between;

    .item {
      width: 300px;
      height: 300px;
      text-align: center;

      .nav-box {
        width: 100%;
        height: 120px;
        border-radius: 50%;

        img {
          width: 100px;
          height: 100px;
          object-fit: cover;
        }
      }

      .title {
        font-size: 22px;
        color: var(--textColor);
        font-weight: 600;
      }

      .box-center {
        margin-top: 15px;
        font-size: 12px;
        color: var(--colorTip);
      }
    }
  }
}

.box-3-list {
  width: 100%;
  background: var(--navBgk);
  padding-bottom: 150px;
  padding-top: 45px;

  .center-box1 {
    width: 1600px;

    .box-title-1 {
      width: 100%;
      text-align: center;
      position: relative;

      .center {
        width: 100%;
        position: absolute;
        margin-top: -30px;

        p:nth-child(1) {
          font-size: 28px;
          font-weight: 600;
          color: #fc476d;
        }

        p:nth-child(2) {
          font-size: 12px;
          color: var(--colorTip);
        }
      }
    }

    .box-2-nav {
      width: 100%;
      margin-top: 100px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .box-item {
        margin-bottom: 25px;
        width: 278px;
        min-height: 480px;
        background: var(--itemBgk);
        //border-radius: 10px;
        overflow: hidden;
        padding: 10px;
        box-sizing: border-box;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

        .image {
          width: 100%;
          height: 250px;
          object-fit: cover;
        }

        .nav {
          width: 100%;
          margin-top: 15px;
          display: flex;
          justify-content: space-between;

          .left-icon {
            font-size: 14px;
            color: var(--navCircle);

            i {
              color: #fc476d;
            }
          }
        }

        .nav-content {
          font-size: 14px;
          margin-top: 10px;
          color: var(--colorTip);
        }

        .btn {
          width: 100%;
          height: 40px;
          display: flex;
          justify-content: center;
          margin-top: 18px;
          align-items: center;
          border: 1px solid var(--switchBorder);
          color: var(--activeColor);
        }
      }

      .box-item-length {
        width: 48%;
        margin: 10px 0;
        min-height: 150px;
        padding: 10px;
        background: var(--itemBgk);
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

        .img-left {
          width: 220px;
          height: 220px;
          object-fit: cover;
        }

        .right-box {
          width: calc(100% - 220px);
          margin-left: 15px;
          padding-top: 15px;
          box-sizing: border-box;

          .titles {
            font-weight: 600;
            font-size: 18px;
            color: var(--navCircle);
          }

          .time {
            font-size: 16px;
            color: var(--navCircle);
            margin-top: 10px;
          }

          .btn-bot {
            margin-top: 20px;
            width: 200px;
            height: 42px;
            border-radius: 5px;
            background: var(--activeColor);
            color: var(--navBgk);
            font-size: 14px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }

    .table {
      width: 100%;
      margin-top: 120px;
    }

    .box-bottom {
      width: 100%;
      display: flex;
      //justify-content: center;
      margin-top: 30px;
    }
  }
}

.dialogs {
  width: 100%;
  min-height: 400px;
  position: relative;
  display: flex;
  justify-content: space-between;

  .dialog-left {
    width: 400px;
    min-height: 400px;

    img {
      width: 400px;
      height: 600px;
      object-fit: cover;
    }
  }

  .dilog-right {
    width: 450px;
    border-left: 1px solid #f6f6f6;
    padding-left: 20px;
    box-sizing: border-box;

    .title {
      font-size: 18px;
      margin-top: 30px;
      color: #000;
    }

    .time {
      font-size: 12px;
      color: #999;
      margin-top: 10px;
    }

    .content {
      width: 100%;
      min-height: 50px;
      overflow-y: scroll;
      max-height: 200px;
      margin-top: 10px;
    }

    .content::-webkit-scrollbar {
      display: none;
    }

    .comment {
      width: 100%;
      //background: red;
      border-top: 1px solid #f2f2f2;
      margin-top: 20px;
      padding-top: 10px;
      height: 250px;
      overflow-y: scroll;

      .item-nav-comment {
        width: 100%;

        .item-comment {
          width: 100%;
          display: flex;
          margin-bottom: 10px;

          .avatar {
            height: 30px;
            border-radius: 50%;
            width: 30px;
            object-fit: contain;
          }

          .right-box {
            margin-left: 10px;

            p:nth-child(1) {
              font-size: 14px;
              color: rgba(168, 168, 168);
            }

            p:nth-child(2) {
              min-height: 30px;
              font-size: 14px;
              color: #000;
            }
          }
        }

        .children {
          width: 100%;
          padding-left: 30px;
          box-sizing: border-box;

          .item-comment {
            width: 100%;
            display: flex;
            margin-bottom: 10px;

            .avatar {
              height: 30px;
              border-radius: 50%;
              width: 30px;
              object-fit: contain;
            }

            .right-box {
              margin-left: 10px;

              p:nth-child(1) {
                font-size: 14px;
                color: rgba(168, 168, 168);
              }

              p:nth-child(2) {
                min-height: 30px;
                font-size: 14px;
                color: #000;
              }
            }
          }
        }
      }


    }

    .comment::-webkit-scrollbar {
      display: none;
    }

    .input {
      width: 430px;
      height: 60px;
      //position: absolute;
      bottom: 0;
      //background: red;
      border-top: 1px solid #f6f6f6;
      padding-top: 15px;
      display: flex;
      align-items: center;

      input {
        height: 40px;
        width: 280px;
        background: rgba(248, 248, 248);
        border-radius: 30px;
        text-indent: 20px;
      }

      input::placeholder {
        color: #999;
      }

      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100px;
        height: 40px;
        margin-left: 10px;
        border-radius: 40px;
        background: #fc476d;
        color: #fff;
      }
    }
  }
}
</style>
